<template>
    <div class="lyear-layout-web">
        <div class="lyear-layout-container">
            <the-aside></the-aside>

            <the-header title="商品列表"></the-header>

            <button id="add-edit-button" type="button" v-show="false" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#gridSystemModal">
                添加修改窗口触发按钮
            </button>

            <div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel" id="gridSystemModal">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="gridSystemModalLabel"></h4>
                        </div>
                        <div class="modal-body">
                            <div class="row">
                                <div class="col-md-3">
                                    <label class="control-label" style="padding-top:5px;" for="example-hf-brand">商品品牌</label>
                                </div>
                                <div class="col-md-7">
                                    <input class="form-control" v-model="product.brand"  type="text" id="example-hf-brand" name="example-hf-brand" placeholder="请输入商品品牌..">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-3">
                                    <label class="control-label" style="padding-top:5px;" for="example-hf-paper-grade">商品纸种</label>
                                </div>
                                <div class="col-md-7">
                                    <input class="form-control" v-model="product.paperGrade"  type="text" id="example-hf-paper-grade" name="example-hf-paper-grade" placeholder="请输入商品纸种..">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-3">
                                    <label class="control-label" style="padding-top:5px;" for="example-hf-level">商品级别</label>
                                </div>
                                <div class="col-md-7">
                                    <input class="form-control" v-model="product.level"  type="text" id="example-hf-level" name="example-hf-level" placeholder="请输入商品级别..">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-3">
                                    <label class="control-label" style="padding-top:5px;" for="example-hf-gram">商品克重</label>
                                </div>
                                <div class="col-md-7">
                                    <input class="form-control" v-model="product.gram"  type="text" id="example-hf-gram" name="example-hf-gram" placeholder="请输入商品克重..">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-3">
                                    <label class="control-label" style="padding-top:5px;" for="example-hf-scale">商品规格</label>
                                </div>
                                <div class="col-md-7">
                                    <input class="form-control" v-model="product.scale"  type="text" id="example-hf-scale" name="example-hf-scale" placeholder="请输入商品规格..">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-3">
                                    <label class="control-label" style="padding-top:5px;" for="example-hf-unit">商品单位</label>
                                </div>
                                <div class="col-md-7">
                                    <input class="form-control" v-model="product.unit"  type="text" id="example-hf-unit" name="example-hf-unit" placeholder="请输入商品单位..">
                                </div>
                            </div>
                            <div class="row" style="margin-top:10px">
                                <div class="col-md-3" style="padding-top:7px;">
                                    <label class="control-label" >商品单价</label>
                                </div>
                                <div class="col-md-7">
                                    <input class="form-control" v-model="product.price" @keydown="inputNumber" type="number" id="example-hf-price" name="example-hf-price" placeholder="请输入商品单价..">
                                </div>
                            </div>
                            <div class="row" style="margin-top:10px">
                                <div class="col-md-3" style="padding-top:7px;">
                                    <label class="control-label" >库位</label>
                                </div>
                                <div class="col-md-7">
                                    <input class="form-control" v-model="stockOrderDto.warehousePosition" type="text" id="example-hf-stock" name="example-hf-stock" placeholder="请输入库位..">
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" id="close-button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <button type="button" class="btn btn-primary" @click="saveProduct">点击保存</button>
                        </div>
                    </div>
                </div>
            </div>


            <button id="buy-button" type="button" v-show="false" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#buyModal">
                购买窗口触发按钮
            </button>

            <div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel" id="buyModal">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="buyModalLabel"></h4>
                        </div>
                        <div class="modal-body">
                            <div class="row">
                                <div class="col-md-3">
                                    <label class="control-label" style="padding-top:5px;" for="example-hf-seller-id">卖方公司编号</label>
                                </div>
                                <div class="col-md-7">
                                    <input class="form-control" type="text" id="example-hf-seller-id" name="example-hf-seller-id" placeholder="请输入卖方公司编号..">
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" id="buy-close-button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <button type="button" class="btn btn-primary" @click="buyProduct">采购</button>
                        </div>
                    </div>
                </div>
            </div>

            <button id="sell-button" type="button" v-show="false" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#sellModal">
                出售窗口触发按钮
            </button>

            <div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel" id="sellModal">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="sellModalLabel"></h4>
                        </div>
                        <div class="modal-body">
                            <div class="row">
                                <div class="col-md-3">
                                    <label class="control-label" style="padding-top:5px;" for="example-hf-seller-id">客户公司编号</label>
                                </div>
                                <div class="col-md-7">
                                    <input class="form-control" type="text" id="example-hf-client-id" name="example-hf-seller-id" placeholder="请输入客户公司编号..">
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" id="sell-close-button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <button type="button" class="btn btn-primary" @click="sellProduct">出售</button>
                        </div>
                    </div>
                </div>
            </div>




            <the-button :msg="msg" :fun="fun" @deleteProduct="deleteProduct"></the-button>

            <!--页面主要内容-->
            <main class="lyear-layout-content">

                <div class="container-fluid">

                    <div class="row">
                        <div class="col-lg-12">
                            <div class="card">
                                <div class="card-toolbar clearfix">
                                    <form class="pull-right search-bar" style="max-width:460px;" role="form">
                                        <div class="input-group">
                                            <div class="input-group-btn">
                                                <input type="hidden" name="search_field" id="search-field" value="title">
                                                <button class="btn btn-default dropdown-toggle" id="search-btn" data-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false">
                                                    商品品牌 <span class="caret"></span>
                                                </button>
                                                <ul class="dropdown-menu">
                                                    <li> <a tabindex="-1" href="javascript:void(0)"  data-field="title">商品品牌</a> </li>
                                                </ul>
                                            </div>
                                            <input id="search-name" style="width:280px"  type="text " v-model="searchContent" class="form-control" value="" placeholder="请输入要搜索的内容..">
                                            <a class="btn btn-pink" href="javascript:void(0);" @click="searchProduct"><i class="mdi mdi-search-web"></i> 搜索</a>
                                        </div>
                                    </form>
                                    <div class="toolbar-btn-action">
                                        <a v-if="permissionCheck('product_add')" class="btn btn-primary m-r-5" href="javascript:void(0);" @click="openAdd"><i class="mdi mdi-plus"></i> 添加</a>
                                        <a class="btn btn-info m-r-5" href="javascript:void(0);" @click="refresh"><i class="mdi mdi-rotate-3d"></i> 刷新</a>
                                        <a v-if="permissionCheck('product_buy')" class="btn btn-danger m-r-5" href="javascript:void(0);" @click="openBuy"><i class="mdi mdi-cart"></i> 采购</a>
                                        <a v-if="permissionCheck('product_sell')" class="btn btn-pink m-r-5" href="javascript:void(0);" @click="openSell"><i class="mdi mdi-sale"></i> 出售</a>
                                    </div>
                                </div>
                                <div class="card-body">

                                    <div class="table-responsive">
                                        <table class="table table-bordered">
                                            <thead>
                                            <tr>
                                                <th>
                                                    <label class="lyear-checkbox checkbox-primary">
                                                    </label>
                                                </th>
                                                <th style="width:10%">编号</th>
                                                <th style="width:10%">商品品牌</th>
                                                <th style="width:10%">商品纸种</th>
                                                <th style="width:10%">商品级别</th>
                                                <th style="width:10%">商品克重</th>
                                                <th style="width:10%">商品规格</th>
                                                <th style="width:10%">商品单位</th>
                                                <th style="width:10%">单价(元)</th>
                                                <th style="width:5%">库位</th>
                                                <th style="width:7.5%">数量选择</th>
                                                <th style="width:7.5%">操作</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr v-for="product in productList" >
                                                <td>
                                                    <label class="lyear-checkbox checkbox-primary">
                                                        <input @click="selectCheckbox" :tip="product.id" class="buy-checkbox" type="checkbox"><span></span>
                                                    </label>
                                                </td>
                                                <td :id="'product-id-'+product.id" v-text="product.id"></td>
                                                <td :id="'product-brand-'+product.id" v-text="product.brand"></td>
                                                <td :id="'product-paper-grade-'+product.id" v-text="product.paperGrade"></td>
                                                <td :id="'product-level-'+product.id" v-text="product.level"></td>
                                                <td :id="'product-gram-'+product.id" v-text="product.gram"></td>
                                                <td :id="'product-scale-'+product.id" v-text="product.scale"></td>
                                                <td :id="'product-unit-'+product.id" v-text="product.unit"></td>
                                                <td :id="'product-price-'+product.id" v-text="product.price"></td>
                                                <td :id="'product-stock-'+product.id" v-text="product.stockOrderDto.warehousePosition"></td>
                                                <td><input :id="'product-buy-num-'+product.id" style="width: 40px;" type="text" onkeyup="value=value.replace(/[^\d]/g,'')" /></td>
                                                <td>
                                                    <div class="btn-group">
                                                        <a v-if="permissionCheck('product_edit')" class="btn btn-xs btn-default" @click="openEdit(product.id)" href="javascript:void(0);" title="编辑" data-toggle="tooltip"><i class="mdi mdi-pencil"></i></a>
                                                        <!--<a class="btn btn-xs btn-default" @click="openDelete(product.id)" href="javascript:void(0);" title="删除" data-toggle="tooltip"><i class="mdi mdi-window-close"></i></a>-->
                                                    </div>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>

                                    <!-- 分页 -->
                                    <the-pagination :page="page" :getData="getData" :searchContent="searchContent" :searchType="searchType" :totalPage="totalPage"></the-pagination>


                                </div>
                            </div>
                        </div>

                    </div>

                </div>

            </main>
            <!--End 页面主要内容-->
        </div>
    </div>
</template>



<script>
    import TheHeader from "../components/the-header";
    import TheAside from "../components/the-aside";
    import TheButton from "../components/the-button";
    import ThePagination from "../components/the-pagination";
    export default {
        name: 'product-list',
        components: {TheHeader, TheAside, TheButton, ThePagination},
        data: function() {
            return {
                stockOrderDto:{},
                product: {},
                productList: [],
                msg: "",
                fun:"",
                ids:"",
                page: 1,
                totalPage: 1,
                searchContent: '',
                searchType: 'brand'
            }
        },
        //mounted 页面渲染完后执行 钩子函数
        mounted:function(){
            $('.search-bar .dropdown-menu a').click(function() {
                let field = $(this).data('field') || '';
                $('#search-field').val(field);
                $('#search-btn').html($(this).text() + ' <span class="caret"></span>');
            });
            //获取种类列表的数据
            let _this = this;
            let data = {
                page: _this.page,
                searchContent: _this.searchContent,
                searchType: _this.searchType
            };
            _this.getData(data);

        },
        methods:{
            inputNumber(e) {
                // 通过正则过滤小数点后两位
                e.target.value = (e.target.value.match(/^\d*(\.?\d{0,1})/g)[0]) || null
            },
            selectCheckbox(){
                let _this = this;
                _this.ids = "";
                $("input[type='checkbox']").each(function() {
                    if($(this).is(":checked")) {
                        _this.ids = _this.ids + $(this).attr("tip");
                        _this.ids = _this.ids + ",";
                    }
                });
                _this.ids = _this.ids.substring(0, _this.ids.length-1);
            },
            buyProduct(){
                let _this = this;
                let purchaseOrderDetailDtoList = [];
                let arr = _this.ids.split(",");
                for(let i=0; i<arr.length; i++){
                    let number = $("#product-buy-num-"+arr[i]).val();
                    let purchaseOrderDetailDto = {};
                    if(number === ""){
                        number = "1";
                    }
                    purchaseOrderDetailDto.number = number;
                    purchaseOrderDetailDto.productId = arr[i];
                    purchaseOrderDetailDtoList.push(purchaseOrderDetailDto);
                }
                let purchaseOrderDto = {};
                purchaseOrderDto.sellerId= $("#example-hf-seller-id").val();
                purchaseOrderDto.purchaseOrderDetailDtoList = purchaseOrderDetailDtoList;
                console.log(purchaseOrderDto);
                _this.$ajax.post(process.env.VUE_APP_SERVER + "/purchase_order/add", purchaseOrderDto).then((response)=>{
                    let resp = response.data;
                    if(resp.code === 0){
                        _this.msg = "采购成功！";
                        $("#alert-button").click();
                        $("#buy-close-button").click();
                    }else{
                        _this.msg = resp.msg;
                        $("#alert-button").click();
                    }
                });
            },
            sellProduct(){
                let _this = this;
                let saleOrderDetailDtos = [];
                let arr = _this.ids.split(",");
                for(let i=0; i<arr.length; i++){
                    let number = $("#product-buy-num-"+arr[i]).val();
                    let saleOrderDetailDto = {};
                    if(number === ""){
                        number = "1";
                    }
                    saleOrderDetailDto.number = number;
                    saleOrderDetailDto.productId = arr[i];
                    saleOrderDetailDtos.push(saleOrderDetailDto);
                }
                let saleOrderDto = {};
                saleOrderDto.clientCompanyId= $("#example-hf-client-id").val();
                saleOrderDto.saleOrderDetailDtos = saleOrderDetailDtos;
                console.log(saleOrderDto);
                _this.$ajax.post(process.env.VUE_APP_SERVER + "/sale_order/save", saleOrderDto).then((response)=>{
                    let resp = response.data;
                    if(resp.code === 0){
                        _this.msg = "出售成功！";
                        $("#alert-button").click();
                        $("#sell-close-button").click();
                    }else{
                        _this.msg = resp.msg;
                        $("#alert-button").click();
                    }
                });
            },
            getData(data){
                Loading.show();
                let _this = this;
                _this.$ajax.post(process.env.VUE_APP_SERVER + "/product/get_data", data).then((response)=>{
                    let resp = response.data;
                    Loading.hide();
                    if(resp.code === 0){
                        _this.productList = resp.data.list;
                        _this.page = resp.data.page;
                        _this.totalPage = resp.data.totalPage;
                    }else{
                        _this.msg = resp.msg;
                        $("#alert-button").click();
                    }
                });
            },
            refresh(){
                window.location.reload();
            },
            saveProduct(){
                let _this = this;
                _this.product.stockOrderDto = _this.stockOrderDto;
                _this.$ajax.post(process.env.VUE_APP_SERVER + "/product/save", _this.product).then((response)=>{
                    let resp = response.data;
                    if(resp.code === 0){
                        _this.msg = resp.msg;
                        _this.productList = resp.data.list;
                        _this.page = resp.data.page;
                        _this.totalPage = resp.data.totalPage;
                        $("#close-button").click();
                    }else{
                        _this.msg = resp.msg;
                    }
                    $("#alert-button").click();
                });
            },
            openAdd(){
                let _this = this;
                _this.product.id = null;
                $("#gridSystemModalLabel").text("添加商品");
                $("#add-edit-button").click();
            },
            openBuy(){
                let _this = this;
                if(_this.ids === ""){
                    _this.msg = "请选择你要购买的商品！";
                    $("#alert-button").click();
                    return false;
                }
                $("#buyModalLabel").text("购买商品");
                $("#buy-button").click();
            },
            openSell(){
                let _this = this;
                if(_this.ids === ""){
                    _this.msg = "请选择你要出售的商品！";
                    $("#alert-button").click();
                    return false;
                }
                $("#sellModalLabel").text("出售商品");
                $("#sell-button").click();
            },
            openEdit(id){
                let _this = this;
                $("#gridSystemModalLabel").text("编辑商品");
                _this.product.brand = $("#product-brand-"+id).text();
                $("#example-hf-brand").val($("#product-brand-"+id).text());

                _this.product.paperGrade = $("#product-paper-grade-"+id).text();
                $("#example-hf-paper-grade").val($("#product-paper-grade-"+id).text());

                _this.product.level = $("#product-level-"+id).text();
                $("#example-hf-level").val($("#product-level-"+id).text());

                _this.product.gram = $("#product-gram-"+id).text();
                $("#example-hf-gram").val($("#product-gram-"+id).text());

                _this.product.scale = $("#product-scale-"+id).text();
                $("#example-hf-scale").val($("#product-scale-"+id).text());

                _this.product.unit = $("#product-unit-"+id).text();
                $("#example-hf-unit").val($("#product-unit-"+id).text());

                _this.product.price = $("#product-price-"+id).text();
                $("#example-hf-price").val($("#product-price-"+id).text());

                _this.stockOrderDto.warehousePosition = $("#product-stock-"+id).text();
                $("#example-hf-stock").val($("#product-stock-"+id).text());


                _this.product.id = id;
                $("#add-edit-button").click();
            },
            openDelete(id){
                let _this = this;
                _this.product.id = id;
                _this.fun = "deleteProduct";
                _this.msg = "确定要删除此条记录吗？";
                $("#confirm-button").click();
            },
            deleteProduct(){
                let _this = this;
                _this.$ajax.post(process.env.VUE_APP_SERVER + "/product/delete", {id:_this.product.id}).then((response)=>{
                    let resp = response.data;
                    if(resp.code === 0){
                        _this.msg = resp.msg;
                        _this.productList = resp.data.list;
                        _this.page = resp.data.page;
                        _this.totalPage = resp.data.totalPage;
                    }else{
                        _this.msg = resp.msg;
                    }
                    $("#alert-button").click();
                });
            },
            searchProduct(){
                let _this = this;
                //获取种类列表的数据
                let data = {
                    page: _this.page,
                    searchContent: _this.searchContent,
                    searchType: _this.searchType
                };
                _this.getData(data);
            },
            permissionCheck(url){
                let permissionList = Permission.getPermission();
                for(let i=0; i<permissionList.length; i++){
                    if(url === permissionList[i]){
                        return true;
                    }
                }
                return false;
            }
        }
    }

</script>


<style>
</style>


